<template>
  <div class="component">
    <Row>
      <Card>
        <div slot="title"
             class="c_title">新增户型
        </div>
        <Button slot="extra"
                @click="close">
          返回
        </Button>
        <Form ref="form"
              :model="form"
              :label-width="90"
              :rules="formValidate">
          <FormItem label="户型名称"
                    prop="name">
            <Input v-model="form.name"
                   style="width:100%"
                   placeholder="请输入户型名称" />
          </FormItem>

          <FormItem label="建筑面积"
                    prop="build_area">
            <Input v-model="form.build_area"
                   number
                   style="width:100%"
                   placeholder="请输入建筑面积"><span slot="append">㎡</span></Input>
          </FormItem>
          <FormItem label="使用面积"
                    prop="use_area">
            <Input v-model="form.use_area"
                   number
                   style="width:100%"
                   placeholder="请输入使用面积"><span slot="append">㎡</span></Input>
          </FormItem>
          <FormItem label="公摊面积"
                    prop="public_area">
            <Input v-model="form.public_area"
                   number
                   style="width:100%"
                   placeholder="请输入公摊面积"><span slot="append">㎡</span></Input>
          </FormItem>
          <FormItem label="赠送面积"
                    prop="gift_area">
            <Input v-model="form.gift_area"
                   number
                   style="width:100%"
                   placeholder="请输入赠送面积"><span slot="append">㎡</span></Input>
          </FormItem>
          <Row>

            <Col :span="8">
            <FormItem label="户型信息"
                      prop="room">
              <Input v-model="form.room"
                     number
                     style="width:100%"
                     placeholder="请输入室">
              <span slot="append">室</span></Input>
            </FormItem>
            </Col>
            <Col :span="8">
            <FormItem prop="hall">
              <Input v-model="form.hall"
                     number
                     style="width:100%"
                     placeholder="请输入厅">
              <span slot="append">厅</span></Input>
            </FormItem>
            </Col>
            <Col :span="8">
            <FormItem prop="toilet">
              <Input v-model="form.toilet"
                     number
                     style="width:100%"
                     placeholder="请输入卫">
              <span slot="append">卫</span></Input>
            </FormItem>
            </Col>
          </Row>

          <FormItem label="户型图"
                    prop="house_image">
            <upload-pic-thumb @on-change="changeAvatar($event)"
                              :multiple="false"
                              :width="300"
                              :height="170"
                              ref="uploadThumb"></upload-pic-thumb>
          </FormItem>
          <Form-item>
            <Button @click="handleSubmit"
                    :loading="submitLoading"
                    type="primary"
                    style="margin-right:5px">确认</Button>
            <Button @click="close">返回</Button>
          </Form-item>
        </Form>
      </Card>
    </Row>
  </div>
</template>
<script>
import {
  housingTypeCreate
} from '@/api/community/housing-type'
import uploadPicThumb from '@/components/tj/upload-pic-thumb'
export default {
  name: 'housing-typeAdd',
  components: {
    uploadPicThumb
  },
  data () {
    return {
      loading: true, // 表单加载状态
      submitLoading: false, // 表单确认状态
      form: { // 添加或编辑表单对象初始化数据
        name: '',
        house_image: '',
        build_area: 0,
        use_area: 0,
        public_area: 0,
        gift_area: 0,
        room: 1,
        hall: 1,
        toilet: 1
      },
      // 表单验证规则
      formValidate: {
        name: [{ required: true, message: '户型名称不能为空', trigger: 'blur' }],
        house_image: [{ required: true, message: '户型图不能为空' }],
        build_area: [{ type: 'number', required: true, message: '建筑面积不能为空且必须为数字', trigger: 'blur' }],
        use_area: [{ type: 'number', required: true, message: '使用面积不能为空且必须为数字', trigger: 'blur' }],
        public_area: [{ type: 'number', required: true, message: '公摊面积不能为空且必须为数字', trigger: 'blur' }],
        gift_area: [{ type: 'number', required: true, message: '赠送面积不能为空且必须为数字', trigger: 'blur' }],
        room: [{ type: 'number', required: true, message: '室不能为空且必须为数字', trigger: 'blur' }],
        hall: [{ type: 'number', required: true, message: '厅不能为空且必须为数字', trigger: 'blur' }],
        toilet: [{ type: 'number', required: true, message: '卫不能为空且必须为数字', trigger: 'blur' }]
      }
    }
  },
  methods: {
    changeAvatar (event) {
      if (event && event.response) this.form.house_image = event.response.media
    },
    init () { },
    handleReset () {
      this.$refs.form.resetFields()
    },
    handleSubmit () {
      console.log(this.form)
      this.$refs.form.validate(valid => {
        if (valid) {
          housingTypeCreate(this.form).then(res => {
            this.$Message.success('操作成功')
            this.close()
          })
        }
      })
    },
    close () {
      this.$router.go(-1)
    }
  },
  mounted () {
    this.init()
  }
}
</script>
